<template>
	<div>
		<!-- 场馆地址 -->
		<!-- <div style="text-align: left;">
			<el-dropdown split-button type="info" @click="handleClick">
				选择场馆
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>龙湖滨江天街店</el-dropdown-item>
					<el-dropdown-item>凯德广场金牛店</el-dropdown-item>
					<el-dropdown-item>伊藤洋华堂(建设路店)</el-dropdown-item>
					<el-dropdown-item>王府井Discovery店</el-dropdown-item>

				</el-dropdown-menu>
			</el-dropdown>
		</div> -->
		<!-- 图片轮播 -->
		<div>
			<template>
				<template>
					<el-carousel :interval="5000" arrow="always" style="height: 600px;">
						<el-carousel-item v-for="item in images" :key="item" style="height: 600px;">
							<img :src="item" />
						</el-carousel-item>
					</el-carousel>
				</template>
			</template>
		</div>
		<div style="margin-top: 150px;">
			<el-divider content-position="left" style="width: 300px; height: 200px;">
				<div style="font: 30px Extra large;padding: 30px;">平台简介</div>
			</el-divider>
			<div style="margin-top: 100px;width: 1200px;text-align: center;margin-left: 120px;" >
				乐刻运动，2015年创立于杭州的健身产业互联网平台，以让每个人平等享有运动健康的资源和权利为使命，以每天响应1亿人次的运动健康需求为愿景。乐刻以用户运营为核心，构建数智中台，打通场景、用户、教练、服务，对健身产业进行数字化升级改造，提高运营效率和供应链管理能力，搭建健身服务新零售生态，助推数字经济与健身产业深度融合发展。长期以来，乐刻致力于为用户提供便利化、高性价比、个性化、温暖快乐的运动健身服务，凭借「月付制」、「24小时」、「智能化」、「全程无推销」、「海量优质团体课」等特征重新定义小型化健身房「乐刻健身」，树立「国民健身房」标准，打造「一公里健身圈」。目前乐刻已经推出「乐刻健身」、「LOVEFITT」、「FEELINGME」、「FitTribe」等线下健身品牌。基于在实践中积累的深刻行业洞见和全产业链服务能力，2020年乐刻发布产业赋能平台「17练」，对外开放选址营建、流量获客、数智中
				台、运营体系和供应链能力，帮助商业运动健身场馆实现场馆智能化、业务在线化、用户、运营数字化。2021年乐刻推出线上健身品牌LITTA，为用户提供居家健身服务。至此，乐刻实现了线上线下双轮驱动以及供需协同的全链路数字化，逐步形成「产业中台+品牌(场景)矩阵」的产业生态模式，提升全民健身渗透率。乐刻拥有700万+注册用户，10000+签约健身教练，在门店布局上，已经入驻北京、上海、杭州、深圳、重庆、武汉、南京、济南、苏州、广州、宁波、成都、西安、长沙、昆明等30余座城市，布局超800家门店。2019年，乐刻获国家「高新技术企业」认定。2020年，乐刻获国家体育总局「全国体育事业突出贡献奖」。2021年，乐刻获国家体育总局「国家体育产业示范单位」称号，同年入围杭州独角兽企业榜单。
			</div>
		</div>
		<!-- 功能模块 -->
		<div style="margin-top: 200px;">
			<el-divider content-position="left" style="width: 300px; height: 200px;">
				<div style="font: 30px Extra large;padding: 30px;">课程选择</div>
			</el-divider>
			<template>
				<div style="margin-left: 150px;margin-top: 100px;">
					<!-- <div style="text-align: left;">
						<el-button @click="show2 = !show2">收取 展开</el-button>
					</div> -->

					<div style="display: flex; margin-top: 20px; height: 100px;">
						<transition name="el-zoom-in-center">
							<div v-show="show2" class="transition-box">
								<router-link to="/" tag="span">团课</router-link>
							</div>
						</transition>

						<transition name="el-zoom-in-top">
							<div v-show="show2" class="transition-box">
								<router-link to="" tag="span">私教课</router-link>
							</div>
						</transition>

						<transition name="el-zoom-in-bottom">
							<div v-show="show2" class="transition-box">
								<router-link to="" tag="span">训练营</router-link>
							</div>
						</transition>
					</div>
				</div>
			</template>
		</div>
		<!-- 社区 -->
		<div style="margin-top: 200px;">
			<el-divider content-position="left" style="width: 300px; height: 200px;">
				<div style="font: 30px Extra large;padding: 30px;">社区</div>
			</el-divider>
			
			<template>
				<div style="text-align: right;margin-right: 300px;">
					<el-button icon="el-icon-refresh-right" @click="setLoading" circle></el-button>
				</div>
				<div style=" margin-top: 100px;margin-left: 180px;">
					
					<el-skeleton style="width:400px" :loading="loading" animated :count="3">
						<template slot="template">
							<el-skeleton-item variant="image" style="width: 400px; height: 267px;" />
							<div style="padding: 14px;">
								<el-skeleton-item variant="h3" style="width: 50%;" />
								<div
									style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
									<el-skeleton-item variant="text" style="margin-right: 16px;" />
									<el-skeleton-item variant="text" style="width: 30%;" />
								</div>
							</div>
						</template>
						<template>
							<div style="float:left;">
								<el-card :body-style="{ padding: '0px', marginBottom: '1px' }" v-for="item in lists"
									:key="item.name">
									<div><img :src="item.imgUrl" class="image multi-content" /></div>

									<div style="padding: 14px;">
										<span>{{ item.name }}</span>
										<div class="bottom card-header;">
											<span class="time">{{ currentDate }}</span>
											<el-button type="text" class="button">操作按钮</el-button>
										</div>
									</div>
								</el-card>
							</div>
						</template>
					</el-skeleton>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		//方法
		methods: {
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},

			handleClick() {
				alert('button click');
			},
			setLoading() {
				this.loading = true
				setTimeout(() => (this.loading = false), 2000)
			},
		},
		//数
		data() {
			return {
				images: ["https://pic.52112.com/180623/JPG-180623A_285/6yY4ZEgizD_small.jpg",
					"https://tqimg.idongde.com/d/2020/04/16/1587025520004359.jpg",
					"https://pic2.zhimg.com/v2-6f0bc1779b95b8021677d383c228a666_r.jpg",
					"https://ts1.cn.mm.bing.net/th/id/R-C.ef784fbb4a39838c2316f03694c9fdda?rik=9Fw0z6wh8okHkg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20200817ac%2f20%2fw1080h1340%2f20200817%2fe3c1-ixvrvsp2943689.jpg&ehk=YCcdegSs9rLoajicWr7PgRhbIGD5my5v8OzhCvQjodA%3d&risl=&pid=ImgRaw&r=0",
					"https://ts1.cn.mm.bing.net/th/id/R-C.20b53a8f4432adef878bd9361e92c3d3?rik=RIJT0rlVCXVz8w&riu=http%3a%2f%2fwww.aidong.me%2fupload%2fpic%2f1566553431.png&ehk=6wJ%2bVjqrSrNMe67Vtl31HCWRdnDGQ2YqEi3B3WgSoMw%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
					"https://ts1.cn.mm.bing.net/th/id/R-C.5692a658d51b61addaafb69caf202a84?rik=yG%2f3tXXMXo4X%2fA&riu=http%3a%2f%2fimg.aiimg.com%2fuploads%2fallimg%2f141126%2f263915-141126103311.jpg&ehk=0vyGBoe5ChKhN%2frU81kg5Q%2femh57Hs5QgGwK6ZemRUQ%3d&risl=&pid=ImgRaw&r=0"
				],

				// 功能模块

				show2: true,
				loading: true,
				currentDate: '2021-06-01',
				lists: [],

			}

		},
		mounted() {
			// 社区
			this.loading = false
			this.lists = [{
					imgUrl: 'https://pic.52112.com/180623/JPG-180623A_285/6yY4ZEgizD_small.jpg',
					name: '鹿',
				},
				{
					imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
					name: '马',
				},
				{
					imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
					name: '山狮',
				},
			]
		},
	}
</script>

<style>
	/* 功能模块 */
	.transition-box {
		margin-bottom: 50px;
		width: 200px;
		height: 100px;
		border-radius: 50px;
		background-color: #c7e5ff;
		text-align: center;
		color: #fff;
		padding: 40px 20px;
		box-sizing: border-box;
		margin-right: 250px;
	}



	/* 场馆 */
	.el-dropdown {
		vertical-align: top;
	}

	.el-dropdown+.el-dropdown {
		margin-left: 15px;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}


	/* 图片轮播图 */
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>
